<template>
  {{ lowCodeLists }}
  <div class="design-editor-item" v-if="lowCode.getComponentsConfig">
    <el-form label-width="50px" label-position="top">
      <!-- 头部标题 -->
      <div v-if="lowCode.getComponentsConfig.type == 'head'">
        <el-form-item label="标题">
          <el-input v-model="lowCode.getComponentsConfig.dataField.title" />
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker v-model="lowCode.getLowCodeDatas[0].dataField.textColor"/>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker v-model="lowCode.getLowCodeDatas[0].dataField.bgColor"/>
        </el-form-item>
      </div>

      <!-- 标题文本 -->
      <div v-if="lowCode.getComponentsConfig.type == 'title'">
        <el-form-item label="标题">
          <el-input v-model="lowCode.getComponentsConfig.dataField.title" />
        </el-form-item>
        <el-form-item label="描述内容">
          <el-input
            v-model="lowCode.getComponentsConfig.dataField.describe"
            maxlength="100"
            placeholder="请输入描述内容"
            :autosize="{ minRows: 2, maxRows: 6 }"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="显示位置">
          <el-radio-group
            v-model="lowCode.getComponentsConfig.dataField.position"
            class="ml-4"
          >
            <el-radio label="1" size="large">居左</el-radio>
            <el-radio label="2" size="large">居中</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题大小">
          <el-radio-group
            v-model="lowCode.getComponentsConfig.dataField.titleSize"
            class="ml-4"
          >
            <el-radio label="12" size="large">12px</el-radio>
            <el-radio label="14" size="large">14px</el-radio>
            <el-radio label="16" size="large">16px</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-checkbox
          v-model="lowCode.getComponentsConfig.dataField.more"
          label="查看更多"
          size="large"
          @change="handleMoreText"
        />
        <div v-if="lowCode.getComponentsConfig.dataField.more">
          <el-form-item label="文本内容">
            <el-input
              v-model="lowCode.getComponentsConfig.dataField.moreText"
              placeholder="请输入描述内容"
            />
          </el-form-item>
          <el-form-item label="跳转链接">
            <el-input
              v-model="lowCode.getComponentsConfig.dataField.link"
              placeholder="请输入跳转链接"
            />
          </el-form-item>
        </div>
      </div>

      <!-- 商品列表 -->
      <div v-if="lowCode.getComponentsConfig.type == 'goods'">
        <el-form-item label="列表样式">
          <el-radio-group
            v-model="lowCode.getComponentsConfig.dataField.styleValue"
            class="ml-4"
          >
            <el-radio label="1" size="large">一行一个</el-radio>
            <el-radio label="2" size="large">一行两个</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品">
          <base-upload :key="new Date().getTime()" v-model:modelValue="lowCode.getComponentsConfig.dataField.lists[lowCode.getComponentsConfig.dataField.goodsIndex].pic" :limit="1"/>
        </el-form-item>
        <el-form-item label="标题">
          <el-input
            v-model="lowCode.getComponentsConfig.dataField.lists[lowCode.getComponentsConfig.dataField.goodsIndex].title"
            placeholder="请输入标题"
          />
        </el-form-item>
        <el-form-item label="价格">
          <el-input
            v-model="lowCode.getComponentsConfig.dataField.lists[lowCode.getComponentsConfig.dataField.goodsIndex].price"
            placeholder="请输入价格"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addGoodsLists">添加商品</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import useLowCode from "@/store/useBaseLowCode";
import baseUpload from "@/components/imgUpload/index.vue";

let lowCode = useLowCode();

let lowCodeLists = ref({});

watch(lowCode, (newVal, oldVal) => {
  lowCodeLists.value = lowCode.getComponentsConfig;
});

const handleMoreText = () => {
  if(lowCode.getComponentsConfig.dataField){
    lowCode.getComponentsConfig.dataField.moreText = "查看更多";
  }
};

const addGoodsLists = () => {
  if(lowCodeLists.value?.dataField){
    lowCodeLists.value.dataField.lists.push({
      pic: "",
      title: "",
      price: "",
    });
  }
};
</script>

<style scoped>
.design-editor-item {
  position: fixed;
  right: 0;
  top: 0px;
  width: 350px;
  height: 100%;
  min-height: 28px;
  background: #f5f6f9;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 5;
  padding: 0 20px;
  padding-top: 30px;
  overflow-y: auto;
}
.title {
  height: 64px;
  line-height: 64px;
  width: 100%;
  background: #cccfff;
  text-align: center;
}
</style>
